<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>photo Gallery</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-grid>
                <ion-row>
                    <ion-col size="10" :key="photo" v-for="photo in photos">
                        <ion-img :src="photo.webviewPath"></ion-img>
                    </ion-col>
                </ion-row>
            </ion-grid>

            <!-- <ion-fab> markup  -->
        </ion-content>

        <ion-list>
            <ion-item :key="prediction.probability" v-for="(prediction, index) in predictions"  color="red">
                <ion-row v-if="index === 0">
                    <ion-label>
                        <h2 :style="{ color: '#00a680', fontSize: '16px', fontWeight: 700 }">{{prediction.tagName}}:</h2>
                    </ion-label>
                    <ion-label>
                        <h2 :style="{ color: '#00a680', fontSize: '16px', fontWeight: 700 }">{{prediction.probability}}</h2>
                    </ion-label>
                </ion-row>

                <ion-row v-else>
                    <ion-label>
                        {{prediction.tagName}}:
                    </ion-label>
                    <ion-label>
                        {{prediction.probability}}
                    </ion-label>
                </ion-row>

            </ion-item>

<!--            <ion-row>-->
<!--                <ion-col size="10" :key="prediction" v-for="prediction in predictions">-->
<!--                    <h1>{{prediction.tagName}}:</h1>-->
<!--                    <p>{{prediction.probability}}</p>-->
<!--                </ion-col>-->
<!--            </ion-row>-->
            <!-- <ion-fab> markup  -->
        </ion-list>

        <ion-content>
            <ion-fab vertical="bottom" horizontal="center" slot="fixed">
                <ion-fab-button @click="takePhoto()">
                    <ion-icon :icon="camera"></ion-icon>
                </ion-fab-button>
            </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script lang="ts">
    import {camera, trash, close} from "ionicons/icons";
    import {usePhotoGallery, Photo} from "@/composables/usePhotoGallery";
    import {
        IonPage,
        IonHeader,
        IonFab,
        IonFabButton,
        IonIcon,
        IonToolbar,
        IonTitle,
        IonContent,
        IonGrid,
        IonRow,
        IonCol,
        IonImg,
        IonList,
        IonItem,
        IonLabel
    } from "@ionic/vue";

    export default {
        name: "Tab2",
        components: {
            IonHeader,
            IonToolbar,
            IonTitle,
            IonContent,
            IonPage,
            IonFab,
            IonFabButton,
            IonIcon,
            IonGrid,
            IonRow,
            IonCol,
            IonImg,
            IonList,
            IonItem,
            IonLabel
        },
        setup() {
            const {takePhoto, photos, predictions} = usePhotoGallery();
            console.log(photos);
            console.log(predictions);

            return {
                photos,
                takePhoto,
                predictions,
                camera,
                trash,
                close
            };
        }
    };
</script>